<template>
	<a-modal v-bind="options">
		<div class="flex-container-nomal" style="height: 150px">
			<div class="flex1 auto-y">
				<span>邀请链接</span>
				<br/>
				<span>{{ url }}</span>
			</div>
		</div>
		<div class="a-modal-dialog-footer">
			<a-space :size="12">
				<a-space :size="12">
					<a-button type="primary" @click="copyText()">复制链接</a-button>
				</a-space>
			</a-space>
		</div>
	</a-modal>
</template>
<script setup lang="ts">
	import {ref, watch, toRef, reactive} from 'vue'
	import {message} from 'ant-design-vue'

	const props = defineProps<{
		visible: boolean
		url: string
		feedBack?: string
	}>()

	const url = ref<string>('')
	const emit = defineEmits(['update:visible', 'success'])
	const cancel = () => {
		emit('update:visible', false)
	}

	const options = reactive({
		width: 600,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		footer: null,
		visible: toRef(props, 'visible'),
		title: '邀请签约',
		bodyStyle: {padding: 0},
		onCancel() {
			cancel()
			emit('success')
		}
	})

	watch(
		() => props.url,
		(newVal: boolean) => {
			if (newVal) {
				url.value = props.url
			}
		}
	)

	const copyText = () => {
		const oInput = document.createElement('input')
		oInput.value = url.value
		document.body.appendChild(oInput)
		oInput.select()
		document.execCommand('Copy')
		oInput.className = 'oInput'
		oInput.style.display = 'none'
		message.success(props.feedBack || '复制成功')
	}
</script>
